import { Button, Checkbox, Form, Input } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import styles from './Login.module.css'
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { adminLoginAsync, loginAsync } from '../../../_redux/actions_async'
import { set_login_type } from '../../../_redux/actions'

export default class Login extends Component {
  render () {
    const onFinish = values => {
      let { admin } = values
      if (admin) {
        this.props.adminLoginAsync({ ...values })
        this.props.set_login_type('admin')
      } else {
        this.props.loginAsync(values)
        this.props.set_login_type('user')
      }
    }

    return (
      <div className={styles.container}>
        <Form
          name="normal_login"
          className={styles.form}
          initialValues={{ remember: false, admin: false }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名！' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="用户名"/>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon"/>}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住密码</Checkbox>
            </Form.Item>
            <Form.Item name="admin" valuePropName="checked" noStyle>
              <Checkbox>管理员</Checkbox>
            </Form.Item>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className={styles.button}>
              登陆
            </Button>
            <Link to="/register">注册</Link>
          </Form.Item>
        </Form>
      </div>
    )
  }
}

Login = connect(
  () => ({}),
  { loginAsync, set_login_type, adminLoginAsync }
)(Login)